import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface DroneInfo {
  id: string;
  iconPath?: string;
  showProgress?: boolean;
  progressValue?: number;
  progressColor?: string;
  progressBackground?: string;
  progressOpacity?: number;
  location: string;
  elevation: string;
  coordinates: string;
}

export interface DroneManagementProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;

  // 无人机数据配置
  drones?: DroneInfo[];
  droneSpacing?: number;
  droneWidth?: number;
  droneHeight?: number;
  columns?: number;

  // 图标配置
  iconSize?: number;
  iconSpacing?: number;

  // 编号配置
  idFontSize?: number;
  idColor?: string;
  idFontFamily?: string;
  idFontWeight?: number;
  idLineHeight?: number;
  idLetterSpacing?: number;
  idBackground?: string;

  // 进度条配置
  progressHeight?: number;
  progressWidth?: number;
  progressBorderWidth?: number;
  progressOpacity?: number;

  // 标签配置
  labelFontSize?: number;
  labelColor?: string;
  labelFontFamily?: string;
  labelFontWeight?: number;
  labelLineHeight?: number;
  labelLetterSpacing?: number;

  // 数值配置
  valueFontSize?: number;
  valueColor?: string;
  valueFontFamily?: string;
  valueFontWeight?: number;
  valueLineHeight?: number;
  valueLetterSpacing?: number;

  // 布局配置
  layout?: 'grid' | 'flex';
  gap?: number;

  // 事件
  onDroneClick?: (drone: DroneInfo, index: number) => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const DroneManagement = forwardRef<HTMLDivElement, DroneManagementProps>((props, ref) => {
  const {
    // 容器样式
    width = 500,
    height = 400,
    backgroundColor = 'transparent',
    borderRadius = 0,

    // 无人机数据配置
    drones = [
      {
        id: 'A717-345',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/编组56.png',
        showProgress: true,
        progressValue: 75,
        progressColor: 'linear-gradient(90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 15%, rgba(52,165,255,0.45) 29%, rgba(52,165,255,0.35) 38%, rgba(52,165,255,0.14) 61%, rgba(0,139,255,0) 100%)',
        progressBackground: 'transparent',
        progressOpacity: 0.65,
        location: '40° N, 11° W',
        elevation: '57m',
        coordinates: 'X:13, Y:67, Z:11'
      },
      {
        id: 'A717-346',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/编组56.png',
        showProgress: true,
        progressValue: 60,
        progressColor: 'linear-gradient(90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 15%, rgba(52,165,255,0.45) 29%, rgba(52,165,255,0.35) 38%, rgba(52,165,255,0.14) 61%, rgba(0,139,255,0) 100%)',
        progressBackground: 'transparent',
        progressOpacity: 0.65,
        location: '41° N, 12° W',
        elevation: '45m',
        coordinates: 'X:15, Y:69, Z:8'
      },
      {
        id: 'A717-347',
        iconPath: 'http://localhost:8085/static/images/zonghezhifa/编组56.png',
        showProgress: true,
        progressValue: 85,
        progressColor: 'linear-gradient(90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 15%, rgba(52,165,255,0.45) 29%, rgba(52,165,255,0.35) 38%, rgba(52,165,255,0.14) 61%, rgba(0,139,255,0) 100%)',
        progressBackground: 'transparent',
        progressOpacity: 0.65,
        location: '39° N, 10° W',
        elevation: '62m',
        coordinates: 'X:11, Y:65, Z:14'
      }
    ],
    droneSpacing = 20,
    droneWidth = 500,
    droneHeight = 120,
    columns = 1,

    // 图标配置
    iconSize = 75,
    iconSpacing = 6,

    // 编号配置
    idFontSize = 22,
    idColor = '#1AD7FF',
    idFontFamily = 'DINAlternate',
    idFontWeight = 700,
    idLineHeight = 22,
    idLetterSpacing = 0.79,
    idBackground = 'linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%)',

    // 进度条配置
    progressHeight = 30,
    progressWidth = 396,
    progressBorderWidth = 0,
    progressOpacity = 0.65,

    // 标签配置
    labelFontSize = 14,
    labelColor = 'rgba(255,255,255,0.8)',
    labelFontFamily = 'SourceHanSansSC',
    labelFontWeight = 400,
    labelLineHeight = 14,
    labelLetterSpacing = 0,

    // 数值配置
    valueFontSize = 16,
    valueColor = '#56A5FF',
    valueFontFamily = 'DINAlternate',
    valueFontWeight = 700,
    valueLineHeight = 16,
    valueLetterSpacing = 0,

    // 布局配置
    layout = 'flex',
    gap = 20,

    // 事件
    onDroneClick,
    onClick,

    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const containerStyle: React.CSSProperties = {
    width: '100%',
    height: `${height}px`,
    borderRadius: `${borderRadius}px`,
    position: 'relative',
    display: layout === 'grid' ? 'grid' : 'flex',
    gridTemplateColumns: layout === 'grid' ? `repeat(${columns}, 1fr)` : 'none',
    flexDirection: layout === 'flex' ? 'column' : 'row',
    flexWrap: layout === 'flex' ? 'nowrap' : 'wrap',
    gap: `${gap}px`,
    padding: '20px',
    boxSizing: 'border-box',
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 0.3s ease',
    ...style
  };

  const droneCardStyle: React.CSSProperties = {
    width: '100%',
    height: `${droneHeight}px`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    cursor: onDroneClick ? 'pointer' : 'default',
    transition: 'all 0.3s ease',
    position: 'relative',
  };

  const iconStyle: React.CSSProperties = {
    width: `${iconSize}px`,
    height: `${iconSize}px`,
    backgroundImage: `url(http://localhost:8085/static/images/zonghezhifa/编组56.png)`,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    flexShrink: 0,
  };

  const contentStyle: React.CSSProperties = {
    flex: 1,
    width: `calc(100% - ${iconSize + 10}px)`,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    height: `${iconSize}px`,
    position: 'relative',
  };

  const idStyle: React.CSSProperties = {
    fontSize: `${idFontSize}px`,
    fontWeight: idFontWeight,
    lineHeight: `${idLineHeight}px`,
    letterSpacing: `${idLetterSpacing}px`,
    textAlign: 'center',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    position: 'absolute',
    top: '5px',
    left: '5px'
  };

  const progressStyle: React.CSSProperties = {
    width: '100%',
    height: `${progressHeight}px`,
    background: 'linear-gradient(90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 5%, rgba(52,165,255,0.45) 29%, rgba(52,165,255,0.35) 38%, rgba(52,165,255,0.14) 61%, rgba(0,139,255,0) 100%)',
    opacity: progressOpacity,
    borderRadius: '2px',
    marginBottom: '10px'
  };

  const infoRowStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    marginTop: '0px'
  };

  const infoGroupStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',

    gap: '4px'
  };

  const labelStyle: React.CSSProperties = {
    fontSize: `${labelFontSize}px`,
    color: labelColor,
    fontFamily: labelFontFamily,
    fontWeight: labelFontWeight,
    lineHeight: `${labelLineHeight}px`,
    letterSpacing: `${labelLetterSpacing}px`,
    textAlign: 'left',
    whiteSpace: 'nowrap',
    userSelect: 'none'
  };

  const valueStyle: React.CSSProperties = {
    fontSize: `${valueFontSize}px`,
    color: valueColor,
    fontFamily: valueFontFamily,
    fontWeight: valueFontWeight,
    lineHeight: `${valueLineHeight}px`,
    letterSpacing: `${valueLetterSpacing}px`,
    textAlign: 'left',
    whiteSpace: 'nowrap',
    userSelect: 'none'
  };

  const handleDroneClick = (drone: DroneInfo, index: number) => {
    if (onDroneClick) {
      onDroneClick(drone, index);
    }
  };

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const droneManagementClassName = [
    'drone-management',
    `drone-management--${layout}`,
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={droneManagementClassName}
      style={containerStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {drones.map((drone, index) => (
        <div
          key={drone.id || index}
          className="drone-management__drone-card"
          style={droneCardStyle}
          onClick={() => handleDroneClick(drone, index)}
        >
          {/* 无人机图标 */}
          <div className="drone-management__drone-icon" style={iconStyle} />

          {/* 内容区域 */}
          <div className="drone-management__drone-content" style={contentStyle}>
            {/* 无人机编号 */}
            <div className="drone-management__drone-id" style={idStyle}>
              {drone.id}
            </div>

            {/* 进度条 */}
            {drone.showProgress && (
              <div className="drone-management__drone-progress" style={progressStyle} />
            )}

            {/* 信息行 */}
            <div className="drone-management__drone-info" style={infoRowStyle}>
              {/* 定位信息 */}
              <div className="drone-management__info-group" style={infoGroupStyle}>
                <span className="drone-management__info-label" style={labelStyle}>
                  定位:
                </span>
                <span className="drone-management__info-value" style={valueStyle}>
                  {drone.location}
                </span>
              </div>

              {/* 高程信息 */}
              <div className="drone-management__info-group" style={infoGroupStyle}>
                <span className="drone-management__info-label" style={labelStyle}>
                  高程:
                </span>
                <span className="drone-management__info-value" style={valueStyle}>
                  {drone.elevation}
                </span>
              </div>

              {/* 坐标信息 */}
              <div className="drone-management__info-group" style={infoGroupStyle}>
                <span className="drone-management__info-label" style={labelStyle}>
                  坐标:
                </span>
                <span className="drone-management__info-value" style={valueStyle}>
                  {drone.coordinates}
                </span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
});

DroneManagement.displayName = 'DroneManagement';

export default DroneManagement;
